<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>功能管理</title>
    <link rel="stylesheet" th:href="@{/statics/css/zTreeStyle/zTreeStyle.css}" type="text/css"></link>
    <style type="text/css">
        .divAll {
            display: inline-block;
        }

        #role_ul {
            list-style: none;
        }
        #role_ul li {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="divAll" style="width: 200px;height: 350px;border: 1px black solid;overflow-y: scroll;overflow-x: scroll; ">
        <ul th:each="role:${roleList}" id="role_ul">
            <li th:text="${role.roleName}" th:id="${'role'+role.id}"></li>
        </ul>
    </div>
    <div class="divAll"  style="width: 400px;height: 350px;border: 1px black solid;overflow-y: scroll;overflow-x: scroll; ">
        <ul id="functionTree" class="ztree"></ul>
        <input type="button" value="保存" id="saveBtn"/>
    </div>

    <script type="text/javascript" th:src="@{/statics/js/zTree/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/statics/js/zTree/jquery.ztree.core.js}"></script>
    <script type="text/javascript" th:src="@{/statics/js/zTree/jquery.ztree.excheck.js}"></script>
    <SCRIPT type="text/javascript" th:inline="javascript">

        $(document).ready(function () {
            var zTreeObj ;
            var rid = 0 ;

            var setting = {
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };


            //配置树(暂时不用了)
            function treeSet(rid, result) {
                var setting = {
                    async: {
                        enable: true,
                        url:"getRoleFunctions",
                        autoParam:["id", "pid", "name"],
                        otherParam:{"rid":rid},
                        dataFilter: filter
                    },
                    data:{
                        simpleData:{
                            enable: true,
                            idKey:'id',
                            pIdKey:'pid',
                            rootPId: 0
                        }
                    },
                    view:{
                        showIcon: false
                    },
                    check: {
                        enable: true
                    }
                };

                function filter(treeId, parentNode, childNodes) {
                    return childNodes;
                }

                zTreeObj = $.fn.zTree.init($("#functionTree"), setting, result);
            }


            //点击选择角色时，出发右侧树形菜单展示
            $("#role_ul li").click(function(){
                rid = $(this).attr("id").substring(4) ;

                $.ajax({
                    type: "post",
                    url: "getRoleFunctions",
                    data: "rid="+rid,
                    dataType: "json",
                    success: function(result) {

                        var zNodesStr ="[" ;
                        $.each(result, function (i, node) {
                            zNodesStr += "{id:"+node.id+",pId:"+node.pid+",name:\""+node.name+"\",open:true,checked:"+node.checked+"}," ;
                        })
                        zNodesStr = zNodesStr.substring(0,zNodesStr.lastIndexOf(",")) ;
                        zNodesStr += "]";
                        console.log(zNodesStr) ;

                        var zNodes = eval("("+zNodesStr+")") ;

                        zTreeObj = $.fn.zTree.init($("#functionTree"), setting, zNodes);
                    }
                })
            })

            //单击保存按钮，触发权限分配保存到数据库中
            $("#saveBtn").click(function () {
                var nodes = zTreeObj.getCheckedNodes();

                var selectedIds = "" ;
                $.each(nodes, function (i, node) {
                    selectedIds += node.id+"," ;
                })
                selectedIds = selectedIds.substring(0, selectedIds.lastIndexOf(",")) ;

                if(selectedIds == "" || selectedIds.length == 0) {
                    alert("请分配权限") ;
                }
                else {

                    $.ajax({
                        type: "post",
                        url: "saveRoleFunctions",
                        data: {rid:rid,functionIds:selectedIds},
                        dataType: "text",
                        success: function(result) {
                            if(result == 1) {
                                alert("分配权限成功") ;
                            }
                            else {
                                alert("分配权限失败") ;
                            }
                        }
                    })
                }
            })
        })

    </SCRIPT>
</body>
</html>